<template>
  <view class="grid-staff-container">
    <view class="staff-list">
      <view class="staff-item" v-for="(item, index) in staffList" :key="index">
        <view class="staff-info">
          <view class="name">{{ item.name }}</view>
          <view class="phone" @tap="makePhoneCall(item.phone)">{{
            item.phone
          }}</view>
        </view>
        <view class="call-icon" @tap="makePhoneCall(item.phone)">
          <van-icon name="phone-o" size="24px" color="#fff" />
        </view>
      </view>
    </view>

    <!-- 悬浮按钮 -->
    <view class="float-button" @tap="showPanel = true">
      <img :src="alarm" width="34px" height="34px" alt="" />
    </view>

    <!-- 弹出面板 -->
    <van-popup
      v-model="showPanel"
      position="bottom"
      :style="{ height: '60%' }"
      round
    >
      <view class="panel-content">
        <view class="panel-header">
          <text class="panel-title">发现警情(匿名)</text>
          <van-icon name="cross" @tap="showPanel = false" />
        </view>

        <view class="form-content">
          <view class="form-item">
            <textarea
              v-model="formData.policeContent"
              placeholder="请输入警情内容"
              class="content-textarea"
            />
          </view>

          <view class="form-item">
            <ne-file-upload :max-file="3" v-model="formData.itemCoverUrls" />
          </view>

          <view class="submit-btn">
            <van-button type="primary" block @tap="submitPoliceInfo"
              >提交</van-button
            >
          </view>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
import NeFileUpload from '../../components/NeFileUpload.vue'
import { faxianjingqing } from '../../api/user'
import alarm from '@/static/alarm.png'
export default {
  components: {
    NeFileUpload,
  },
  data() {
    return {
      alarm,
      staffList: [],
      showPanel: false,
      policeContent: '',
      fileList: [],
      formData: {
        policeContent: '',
        itemCoverUrls: [],
      },
    }
  },
  onLoad() {
    this.getStaffList()
  },
  methods: {
    // 获取警员列表
    async getStaffList() {
      try {
        const res = await this.$http({
          url: '/tbStaff/list',
          method: 'post',
          data: {},
        })
        if (res.code === '0') {
          this.staffList = res.data || []
        }
      } catch (error) {
        uni.showToast({
          title: '网络错误',
          icon: 'none',
        })
      }
    },
    makePhoneCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
        success: (res) => {
          console.log('拨打电话成功')
        },
        fail: (err) => {
          console.log('拨打电话失败', err)
        },
      })
    },
    // 上传图片后的回调
    afterRead(event) {
      const { file } = event.detail
      // 这里可以处理图片上传逻辑
      console.log('上传的图片：', file)
    },

    // 提交警情信息
    async submitPoliceInfo() {
      if (!this.formData.policeContent.trim()) {
        uni.showToast({
          title: '请输入警情内容',
          icon: 'none',
        })
        return
      }

      try {
        // 这里添加提交警情信息的接口调用
        const res = await faxianjingqing({
          policeContent: this.formData.policeContent,
          itemCoverUrls: this.formData.itemCoverUrls
            .map((i) => i.url)
            .join(','),
        })

        if (res.code == '0') {
          uni.showToast({
            title: '提交成功',
            icon: 'success',
          })
          this.formData = {
            policeContent: '',
            itemCoverUrls: [],
          }
          this.fileList = []
          this.showPanel = false
        }
      } catch (error) {
        uni.showToast({
          title: '提交失败',
          icon: 'none',
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.grid-staff-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;

  .header {
    padding: 30rpx 0;
    text-align: center;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .staff-list {
    .staff-item {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      .staff-info {
        .name {
          font-size: 32rpx;
          color: #333;
          margin-bottom: 10rpx;
        }

        .phone {
          font-size: 28rpx;
          color: #666;
        }
      }

      .call-icon {
        width: 80rpx;
        height: 80rpx;
        background-color: #66c2ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.float-button {
  position: fixed;
  right: 30rpx;
  bottom: 50rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #66c2ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  z-index: 99;
}

.panel-content {
  padding: 30rpx;

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .panel-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .form-content {
    .form-item {
      margin-bottom: 30rpx;

      .content-textarea {
        width: 100%;
        height: 200rpx;
        padding: 20rpx;
        box-sizing: border-box;
        border: 1px solid #eee;
        border-radius: 8rpx;
        font-size: 28rpx;
      }
    }

    .submit-btn {
      margin-top: 40rpx;
    }
  }
}
</style> 